Documentation

Structure hiérarchique du chatbot

Nous pouvons ajouter un nombre variable de couches (ou layers) au chatbot, à condition de respecter certaines règles et la hiérarchie du fichier JSON.

Règles de structure

Level 0 est obligatoire : c'est la base de la structure.
Il est possible d'ajouter zéro ou plusieurs Level 1.
Il ne peut y avoir qu’un seul Level 2 par branche.
Le contenu est obligatoirement associé au Level 2.

Exemples de structures possibles

Level0 → Level1 → Level2 → Contenu
Level0 → Level2 → Contenu
Level0 → Level1-1 → Level1-2 → Level1-3 → Level1-4 → Level2 → Contenu

Personnalisation du wording des types d’éléments

Vous pouvez personnaliser le libellé affiché pour certains types d’éléments via le fichier JSON de configuration.
Par défaut, le terme « éléments » est utilisé si aucun libellé n’est défini.

➕ Ajouter un libellé personnalisé

Pour remplacer le libellé par défaut, ajoutez le champ "unitLabel" à l’objet concerné dans le fichier JSON.

Par exemple, pour afficher « Projets » à la place de « éléments » :

{
  "type": "project",
  "unitLabel": "Projets",
  "items": [
    // ...
  ]
}

## Exemple de structure JSON

```json
{
    "chatbot": [
        {
            "label": "DataSprint 1",
            "unitLabel": "Projets",
            "children": [
                {
                    "label": "DataSprint Gestion des projets 1-0",
                    "unitLabel": "Sous-projets",
                    "children": [
                        {
                            "label": "DataSprint Gestion des projets 1-2",
                            "unitLabel": "Sous-Sous-projet",
                            "children": [
                                {
                                    "label": "DataSprint Gestion des projets 1-3",
                                    "unitLabel": "Sous-Sous-Sous-projet",
                                    "children": [
                                        {
                                            "label": "DataSprint Gestion des projets 1-4",
                                            "unitLabel": "Sous-Sous-Sous-Sous-projet",
                                            "children": [
                                                {
                                                    "label": "DataSprint Gestion des projets 1-5",
                                                    "unitLabel": "articles",
                                                    "children": [
                                                        {
                                                            "label": "DataSprint C'est quoi un projet ?",
                                                            "date": "Actualisé il y a 8 mois",
                                                            "content": "<h1>ajouter du html</h1> <a href='''> test lien</a>"
                                                        },
                                                        {
                                                            "label": "Créer un nouveau projet",
                                                            "date": "Actualisé il y a 6 mois",
                                                            "content": "<h3>C’est quoi un projet ?</h3><p>1. DataSprint regroupe tous vos projets. Ils sont accessibles à partir de la liste principale.</p><img class=\"returnonglet\" src=\"{{imgDir}}imageExemple.png\" /><p>2. Un projet regroupe toutes les informations relative à votre travail :</p><ul><li>les données brutes de vos sondages</li><li>les données brutes de vos sondages</li><li>les données brutes de vos sondages</li></ul>"
                                                        }
                                                    ]
                                                }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "label": "DataSprint Gestion des projets 2-2",
                            "children": [
                                {
                                    "label": "DataSprint Gestion des projets 2-3",
                                    "children": [
                                        {
                                            "label": "DataSprint C'est quoi un projet ?",
                                            "date": "Actualisé il y a 8 mois",
                                            "content": "<h1>ajouter du html</h1>"
                                        },
                                        {
                                            "label": "Créer un nouveau projet",
                                            "date": "Actualisé il y a 6 mois",
                                            "content": "<h3>C’est quoi un projet ?</h3><p>1. DataSprint regroupe tous vos projets. Ils sont accessibles à partir de la liste principale.</p><img class=\"returnonglet\" src=\"{{imgDir}}imageExemple.png\" /><p>2. Un projet regroupe toutes les informations relative à votre travail :</p><ul><li>les données brutes de vos sondages</li><li>les données brutes de vos sondages</li><li>les données brutes de vos sondages</li></ul>"
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                },
                {
                    "label": "DataSprint Gestion onlget 2",
                    "children": [
                        {
                            "label": "DataSprint C'est quoi un projet ?",
                            "date": "Actualisé il y a 8 mois",
                            "content": "<h1>ajouter du html</h1>"
                        },
                        {
                            "label": "Créer un nouveau projet",
                            "date": "Actualisé il y a 6 mois",
                            "content": "<h3>C’est quoi un projet ?</h3><p>1. DataSprint regroupe tous vos projets. Ils sont accessibles à partir de la liste principale.</p><img class=\"returnonglet\" src=\"{{imgDir}}imageExemple.png\" /><p>2. Un projet regroupe toutes les informations relative à votre travail :</p><ul><li>les données brutes de vos sondages</li><li>les données brutes de vos sondages</li><li>les données brutes de vos sondages</li></ul>"
                        },
                        {
                            "label": "Archivage d'un projet",
                            "date": "Actualisé il y a 4 mois",
                            "content": "<h3>C’est quoi un projet ?</h3><p>1. DataSprint regroupe tous vos projets. Ils sont accessibles à partir de la liste principale.</p><img class=\"returnonglet\" src=\"{{imgDir}}imageExemple.png\" /><p>2. Un projet regroupe toutes les informations relative à votre travail :</p><ul><li>les données brutes de vos sondages</li><li>les données brutes de vos sondages</li><li>les données brutes de vos sondages</li></ul>"
                        },
                        {
                            "label": "Supprimer un projet",
                            "date": "Actualisé il y a 2 mois",
                            "content": "<h3>C’est quoi un projet ?</h3><p>1. DataSprint regroupe tous vos projets. Ils sont accessibles à partir de la liste principale.</p><img class=\"returnonglet\" src=\"{{imgDir}}imageExemple.png\" /><p>2. Un projet regroupe toutes les informations relative à votre travail :</p><ul><li>les données brutes de vos sondages</li><li>les données brutes de vos sondages</li><li>les données brutes de vos sondages</li></ul>"
                        },
                        {
                            "label": "Savoir que contient un projet",
                            "date": "Actualisé il y a 1 mois",
                            "content": "<h3>C’est quoi un projet ?</h3><p>1. DataSprint regroupe tous vos projets. Ils sont accessibles à partir de la liste principale.</p><img class=\"returnonglet\" src=\"{{imgDir}}imageExemple.png\" /><p>2. Un projet regroupe toutes les informations relative à votre travail :</p><ul><li>les données brutes de vos sondages</li><li>les données brutes de vos sondages</li><li>les données brutes de vos sondages</li></ul>"
                        }
                    ]
                }
            ]
        },
        {
            "label": "DataSprint 2",
            "unitLabel": "articles",
            "children": [
                {
                    "label": "DataSprint C'est quoi un projet ?",
                    "date": "Actualisé il y a 8 mois",
                    "content": "<h1>ajouter du html</h1>"
                },
                {
                    "label": "Créer un nouveau projet",
                    "date": "Actualisé il y a 6 mois",
                    "content": "<h3>C’est quoi un projet ?</h3><p>1. DataSprint regroupe tous vos projets. Ils sont accessibles à partir de la liste principale.</p><img class=\"returnonglet\" src=\"{{imgDir}}imageExemple.png\" /><p>2. Un projet regroupe toutes les informations relative à votre travail :</p><ul><li>les données brutes de vos sondages</li><li>les données brutes de vos sondages</li><li>les données brutes de vos sondages</li></ul>"
                },
                {
                    "label": "Archivage d'un projet",
                    "date": "Actualisé il y a 4 mois",
                    "content": "<h3>C’est quoi un projet ?</h3><p>1. DataSprint regroupe tous vos projets. Ils sont accessibles à partir de la liste principale.</p><img class=\"returnonglet\" src=\"{{imgDir}}imageExemple.png\" /><p>2. Un projet regroupe toutes les informations relative à votre travail :</p><ul><li>les données brutes de vos sondages</li><li>les données brutes de vos sondages</li><li>les données brutes de vos sondages</li></ul>"
                },
                {
                    "label": "Supprimer un projet",
                    "date": "Actualisé il y a 2 mois",
                    "content": "<h3>C’est quoi un projet ?</h3><p>1. DataSprint regroupe tous vos projets. Ils sont accessibles à partir de la liste principale.</p><img class=\"returnonglet\" src=\"{{imgDir}}imageExemple.png\" /><p>2. Un projet regroupe toutes les informations relative à votre travail :</p><ul><li>les données brutes de vos sondages</li><li>les données brutes de vos sondages</li><li>les données brutes de vos sondages</li></ul>"
                },
                {
                    "label": "Savoir que contient un projet",
                    "date": "Actualisé il y a 1 mois",
                    "content": "<h3>C’est quoi un projet ?</h3><p>1. DataSprint regroupe tous vos projets. Ils sont accessibles à partir de la liste principale.</p><img class=\"returnonglet\" src=\"{{imgDir}}imageExemple.png\" /><p>2. Un projet regroupe toutes les informations relative à votre travail :</p><ul><li>les données brutes de vos sondages</li><li>les données brutes de vos sondages</li><li>les données brutes de vos sondages</li></ul>"
                }
            ]
        }
    ]
}

Preview

DataSprint static n°1

4 onglets static

DataSprint static n°1

4 onglets static

DataSprint static n°1

4 onglets static

DataSprint static n°1

4 onglets static

DataSprint static n°1

4 onglets static

Balisage


                
                    <!-- start fake div content-->
                    <div style="height: 90vh; background-color: white; padding: 100px;"></div>
                    <!-- end fake div content-->
                    <form class="chatbot__box js-chatbotBox" id="formChatbot" data-accepted=".jpg, .png" action="/" enctype="multipart/form-data">
                        <div class="chatbot__box__header">
                            <div class="chatbot__box__header__wrap">
                                <h2 class="title-first">Centre d'aide</h2>
                                <h2 class="title-second hidden-btn-title">Centre d'aide2</h2>
                                <div class="search-form">
                                    <div class="search-input-container">
                                        <input class="search-input" type="text" placeholder="Rechercher une aide" name="query"/><img class="search-icon" src="assets/images/search.svg" alt="Search"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="chatbot__box__content js-chatbox-content">
                            <div class="chatbot__box__content--level-0">
                                <div class="chatbot__box__content__question--level-0"><a class="chatbot__question--level-0">
                                        <div class="wrap-text--level-0">
                                            <p>DataSprint static n°1</p><span>4 onglets static</span>
                                        </div><img class="ongletimg" src="assets/images/onglet.svg"/></a></div>
                            </div>
                            <div class="chatbot__box__content--level-0">
                                <div class="chatbot__box__content__question--level-0"><a class="chatbot__question--level-0">
                                        <div class="wrap-text--level-0">
                                            <p>DataSprint static n°1</p><span>4 onglets static</span>
                                        </div><img class="ongletimg" src="assets/images/onglet.svg"/></a></div>
                            </div>
                            <div class="chatbot__box__content--level-0">
                                <div class="chatbot__box__content__question--level-0"><a class="chatbot__question--level-0">
                                        <div class="wrap-text--level-0">
                                            <p>DataSprint static n°1</p><span>4 onglets static</span>
                                        </div><img class="ongletimg" src="assets/images/onglet.svg"/></a></div>
                            </div>
                            <div class="chatbot__box__content--level-0">
                                <div class="chatbot__box__content__question--level-0"><a class="chatbot__question--level-0">
                                        <div class="wrap-text--level-0">
                                            <p>DataSprint static n°1</p><span>4 onglets static</span>
                                        </div><img class="ongletimg" src="assets/images/onglet.svg"/></a></div>
                            </div>
                            <div class="chatbot__box__content--level-0">
                                <div class="chatbot__box__content__question--level-0"><a class="chatbot__question--level-0">
                                        <div class="wrap-text--level-0">
                                            <p>DataSprint static n°1</p><span>4 onglets static</span>
                                        </div><img class="ongletimg" src="assets/images/onglet.svg"/></a></div>
                            </div>
                        </div>
                        <div class="chatbot__box__footer"><a href="#"><img src="assets/images/chatbotFooter.svg"/>Centre d'aide</a><a href="#"><img src="assets/images/chatbotFooter.svg"/>Centre d'aide 2</a></div>
                    </form>

Documentation

Structure hiérarchique du chatbot

Règles de structure

Exemples de structures possibles

Personnalisation du wording des types d’éléments

➕ Ajouter un libellé personnalisé

Zone de contenu

Preview

Centre d'aide

Centre d'aide2

Balisage